<template>
  <div id="lessonTab">
    <van-nav-bar
      title="课表"
      left-arrow
      @click-left="$router.back()"
    />
    <calendar @listenToCalendar="listenToCalendar" @changeMonth="changeMonth"></calendar>
    <div v-if="dayLogList.length">
      <div class="lesson_detail" v-for="(item, index) in dayLogList"
      :key="index">
        <p>{{[item.startDate, item.endDate] | timeFilter}}</p>
        <p>
          <span>班级：</span>
          <span>{{item.className}}</span>
        </p>
        <p>
          <span>校区：</span>
          <span>{{item.deptName}}</span>
        </p>
        <p>
          <span>教室：</span>
          <span>{{item.classRoomName}}</span>
        </p>
        <p>
          <span>状态：</span>
          <span v-if="item.status==1">未上课</span>
          <span v-else style="color: red;">已上课</span>
        </p>
      </div>
    </div>
    <div class="emptyList" v-else>
      <p>
        <i class="icon iconfont icon-zanwukechengeps"></i>
      </p>
      <p>暂无课程</p>
    </div>
  </div>
</template>

<script>
import Calendar from '@/components/Calendar.vue'
import { getCookieStorage, getFormateDate } from '@/assets/js/common.js'
export default {
  data () {
    return {
      courseLogList: [],
      // 某天的课程
      dayLogList: [],
      clickDay: '',
      month: '',
      userId: getCookieStorage('userInfo').id,
      userType: getCookieStorage('userType')
    }
  },
  mounted () {
    // this.clickDay = getFormateDate(new Date(), 'yyyyMMdd')
    // setTimeout(() => {
    // this.getDayLogList()
    // }, 100)
  },
  watch: {
    clickDay (n, o) {
      this.dayLogList = []
      this.getDayLogList()
    },
    month () {
      this.dayLogList = []
    }
  },
  methods: {
    getDayLogList () {
      let courseLogList = getCookieStorage('courseLogList')
      if (courseLogList) {
        this.courseLogList = courseLogList
        for (var i = 0; i < this.courseLogList.length; i++) {
          if (this.courseLogList[i].startDate.indexOf(this.clickDay) > -1) {
            this.dayLogList.push(this.courseLogList[i])
          }
        }
      } else {
        this.getStusLogList(() => {
          for (var i = 0; i < this.courseLogList.length; i++) {
            if (this.courseLogList[i].startDate.indexOf(this.clickDay) > -1) {
              this.dayLogList.push(this.courseLogList[i])
            }
          }
        })
      }
    },
    // 获取当月课程列表
    getStusLogList (callback) {
      let url = ''
      if (this.userType === '学生') {
        url = '/api/course/getStudentCourseLogList'
      } else if (this.userType === '老师') {
        url = '/api/course/getTeacherCourseLogList'
      }
      this.$api.post(url,
        {
          userId: this.userId,
          courseYM: Number(getFormateDate(new Date(), 'yyyyMM'))
        }).then(res => {
        if (res.code === 0) {
          this.courseLogList = res.data.courseLogList
          if (typeof callback === 'function') {
            callback()
          }
        }
      })
    },
    listenToCalendar (date) {
      console.log(date)
      this.clickDay = date[0].replace(/\//g, '-')
    },
    changeMonth (month) {
      this.month = month
    }
  },
  components: {
    Calendar
  }
}
</script>

<style lang="scss" scoped>
#lessonTab {
  height: 100%;
  background: #efefef;
  .lesson_detail {
    background: #fff;
    padding: .12rem;
    border-bottom: 1px solid #eee;
    &:last-child {
      border: none;
    }
    p {
      margin: 0;
      padding: 5px 0;
      &:first-child {
        font-size: 16px;
        color: #999;
      }
      &:last-child {
        span {
          color: #2196f3;
        }
      }
      span:first-child {
        color: #999;
      }
    }
  }
  .emptyList {
    background: #fff;
    padding: .2rem 0;
    p {
      text-align: center;
      font-size: 16px;
      color: #ccc;
      .icon {
        font-size: 100px;
      }
    }
  }
}
</style>
